<template>
    <header class="search-header jumbotron">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <h1>搜索中心</h1>
                    <form role="form" id="search_form" @submit.prevent="search">
                        <div class="input-group">
                            <input type="text" class="form-control input-lg" name="q" v-model="q" placeholder="Search for..." autocomplete="off">
                            <span class="input-group-btn">
                                <button class="btn btn-default btn-lg" type="submit"><i class="fa fa-search"></i></button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </header>
</template>
<style>
    .search-header {
        position: relative;
        text-align: center;
        color: #fff;
        margin-bottom: 0;
    }
</style>
<script>
    export default{
        methods:{
            search(){
                if (this.q.trim()){
                    this.$parent.handleSearch()
                }
            },
        },
        computed: {
            q: {
                get () {
                    return this.option.q
                },
                set (val) {
                    this.$parent.handleChange({q:val})
                }
            }
        },
        vuex:{
            getters:{
                option: ({searchList}) => searchList.option
            }
        }
    }
</script>
